<template>
	<view>
		<view class="top-view">
			<u-image class="bg-img" width="689rpx" height="251rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/children-info-bg.png"></u-image>
			<view class="info-view">
				<children-head-view :imgUrl="imgUrl" :gender="gender"></children-head-view>
				<text class="name">{{name}}</text>
				<text class="desc">性别：{{formatGender()}} | 月龄：{{formatMonth()}}个月</text>
			</view>
		</view>
		
		<view v-if="more" class="base-info-view">
			<view class="item">
				<text class="title">身高(CM)</text>
				<view class="input-bg">
					{{height === null ? '-' : height}}
				</view>
			</view>
			<view class="item">
				<text class="title">体重(KG)</text>
				<view class="input-bg">
					{{weight === null ? '-' : weight}}
				</view>
			</view>
			<view class="item">
				<text class="title">头围(CM)</text>
				<view class="input-bg">
					{{header === null ? '-' : header}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import ChildrenHeadView from '@/components/children-head-view.vue'
	import { wrapMonthByBirthday, formatDateByTimestamp } from '@/utils/utils.js'
	export default {
		name: "ChildrenBaseTopView",
		components: {
			ChildrenHeadView
		},
		props: {
			imgUrl: {
				type: String,
				default () {
					return ''
				}
			},
			gender: {
				type: [String, Number],
				default () {
					return 0
				}
			},
			gray: {
				type: Boolean,
				default () {
					return false
				}
			},
			name: {
				type: String,
				default () {
					return ''
				}
			},
			state: {
				type: String,
				default () {
					return ''
				}
			},
			month: {
				type: [String, Number],
				default () {
					return '';
				}
			},
			birthday: {
				type: [String, Number],
				default () {
					return 0;
				}
			},
			height: {
				type: [String, Number],
				default () {
					return 0;
				}
			},
			weight: {
				type: [String, Number],
				default () {
					return 0;
				}
			},
			header: {
				type: [String, Number],
				default () {
					return 0;
				}
			},
			more: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {

			};
		},
		
		methods: {
			formatGender() {
				if (this.$props.gender === 0 || this.$props.gender === '0') {
					return '女';
				}
				return '男'
			},
			
			formatMonth() {
				if (!this.$u.test.isEmpty(this.month)) {
					return this.month;
				}
				
				return wrapMonthByBirthday(parseInt(this.birthday));
			}
		}
	}
</script>

<style lang="scss">
	.children-top-view{
		
	}
	
	.top-view {
		position: relative;
		width: 689rpx;
		height: 251rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.bg-img{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		
		.info-view{
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 2;
			
			.name{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-top: 10rpx;
			}
			
			.desc{
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #6E645A;
				margin-top: 5rpx;
			}
		}
	}
	
	.base-info-view {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;

		.item {
			width: 216rpx;
			height: 192rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.input-bg {
				width: 176rpx;
				height: 88rpx;
				background: #FAFAFA;
				border-radius: 20rpx;
				margin-top: 20rpx;
				font-size: 30rpx;
				
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
